<template>
  <div class="right-box">
    <div class="box1">
      <div class="title-box">
        <commonItemTitleV2 title="事前预警"></commonItemTitleV2>
      </div>
      <div
        class="content-box"
        @mouseenter.native.capture="handleMouseEnter"
        @mouseleave.native="handleMouseLeave"
      >
        <div class="head-box">
          <div class="item1" :style="{ flex: box1Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box1Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box1Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box1Flex[3] }">数量</div>
        </div>
        <div class="list-box">
          <vue3ScrollSeamless
            class="scroll-wrap"
            :classOptions="listScrollOptions"
            :dataList="data.prevEventWarningList"
            v-if="listScrollOptions.singleHeight > 0"
          >
            <commonWarnList
              :flex-list="box1Flex"
              :table-data="data.prevEventWarningList"
              :table-type="1"
            ></commonWarnList>
          </vue3ScrollSeamless>
          <commonWarnList
            :flex-list="box1Flex"
            :table-data="data.prevEventWarningList"
            :table-type="1"
            v-else
          ></commonWarnList>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="title-box">
        <commonItemTitleV2 title="事中预警"></commonItemTitleV2>
      </div>
      <div
        class="content-box"
        @mouseenter.native.capture="handleMouseEnter"
        @mouseleave.native="handleMouseLeave"
      >
        <div class="head-box">
          <div class="item1" :style="{ flex: box2Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box2Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box2Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box2Flex[3] }">业务单号</div>
        </div>
        <div class="list-box">
          <vue3ScrollSeamless
            class="scroll-wrap"
            :classOptions="listScrollOptions"
            :dataList="data.inEventWarningList"
            v-if="listScrollOptions.singleHeight > 0"
          >
            <commonWarnList
              :flex-list="box2Flex"
              :table-data="data.inEventWarningList"
              :table-type="2"
            ></commonWarnList>
          </vue3ScrollSeamless>
          <commonWarnList
            :flex-list="box2Flex"
            :table-data="data.inEventWarningList"
            :table-type="2"
            v-else
          ></commonWarnList>
        </div>
      </div>
    </div>
    <div class="box3">
      <div class="title-box">
        <commonItemTitleV2 title="事后预警"></commonItemTitleV2>
      </div>
      <div
        class="content-box"
        @mouseenter.native.capture="handleMouseEnter"
        @mouseleave.native="handleMouseLeave"
      >
        <div class="head-box">
          <div class="item1" :style="{ flex: box2Flex[0] }">预警名称</div>
          <div class="item2" :style="{ flex: box2Flex[1] }">业务类型</div>
          <div class="item3" :style="{ flex: box2Flex[2] }">进出口</div>
          <div class="item4" :style="{ flex: box2Flex[3] }">业务单号</div>
        </div>
        <div class="list-box">
          <vue3ScrollSeamless
            class="scroll-wrap"
            :classOptions="listScrollOptions"
            :dataList="data.postEventWarningList"
            v-if="listScrollOptions.singleHeight > 0"
          >
            <commonWarnList
              :flex-list="box2Flex"
              :table-data="data.postEventWarningList"
              :table-type="2"
            ></commonWarnList>
          </vue3ScrollSeamless>
          <commonWarnList
            :flex-list="box2Flex"
            :table-data="data.postEventWarningList"
            :table-type="2"
            v-else
          ></commonWarnList>
        </div>
      </div>
    </div>
    <Teleport to="body">
      <div
        class="tooltip-box"
        :style="{ top: tooltipBoxPosY + 'px', left: tooltipBoxPosX + 'px' }"
        v-if="isShowTooltip"
      >
        {{ tooltipValue }}
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import commonItemTitleV2 from "@/components/commonItemTitleV2.vue";
import commonWarnList from "../../../components/commonWarnList.vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";
import preWarningJson from "../../../mock/preWarning.json";
import duringWarningJson from "../../../mock/duringWarning.json";
import afterWarningJson from "../../../mock/afterWarning.json";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const box1Flex = ref([4, 2, 2, 2]);
const box2Flex = ref([3, 3, 2, 6]);

const tooltipValue = ref("dd");
const isShowTooltip = ref(false);
const tooltipBoxPosX = ref(0);
const tooltipBoxPosY = ref(0);

const handleMouseEnter = (e) => {
  // console.log("handleMouseEnter", e, e.target.className);
  if (e.target.className === "text") {
    tooltipValue.value = e.target.innerText;
    let ele = document.getElementsByClassName("listItem");
    let itemHeight = ele[0]?.offsetHeight;
    const sourceRect = e.target.getBoundingClientRect();
    // tooltipBoxPosX.value = e.clientX;
    // tooltipBoxPosY.value = e.clientY - itemHeight;
    tooltipBoxPosX.value = parseInt(sourceRect.left);
    tooltipBoxPosY.value =
      parseInt(sourceRect.top) - itemHeight - e.target.clientHeight;
    // console.log('tooltipBoxPosY',tooltipBoxPosY.value)
    isShowTooltip.value = true;
  } else {
    tooltipValue.value = "";
    isShowTooltip.value = false;
  }
};
const handleMouseLeave = () => {
  tooltipValue.value = "";
  isShowTooltip.value = false;
};

const listScrollOptions = ref({
  singleHeight: 0,
});
const renderScrollFun = () => {
  let ele = document.getElementsByClassName("listItem");
  let scroll1 = ele[0]?.offsetHeight;
  listScrollOptions.value.singleHeight = scroll1 ? scroll1 : 0;
};
const resizeRender = () => {
  listScrollOptions.value.singleHeight = 0;
  setTimeout(() => {
    renderScrollFun();
  }, 2000);
};
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      renderScrollFun();
    }, 2000);
  });
});
defineExpose({
  resizeRender,
});
</script>

<style scoped lang="scss">
.right-box {
  position: relative;
}
.box1,
.box2,
.box3 {
  padding: 15px 16px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(22, 99, 163, 0.2);
  border-radius: 8px 8px 8px 8px;
  // .title-box {
  // }
  .content-box {
    // width: 402px;
    position: relative;
    margin-top: 13px;
    color: #fff;
    .head-box {
      display: flex;
      align-items: center;
      height: 36px;
      background: #ecf7ff;
      font-weight: 400;
      font-size: 13px;
      color: #144783;
      .item1 {
        padding: 0 12px;
        box-sizing: border-box;
      }
    }
  }
}
.box1 {
  height: 246px;
  .content-box {
    height: 185px;
    // overflow-y: scroll;
    overflow: hidden;
  }
  .scroll-wrap {
    height: 153px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
.box2,
.box3 {
  .scroll-wrap {
    height: 225px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}
.box2 {
  height: 322px;
  margin: 16px 0;
  .content-box {
    height: 262px;
    // overflow-y: scroll;
    overflow: hidden;
  }
}
.box3 {
  height: 320px;
  .content-box {
    height: 260px;
    // overflow-y: scroll;
    overflow: hidden;
  }
}

.tooltip-box {
  position: absolute;
  top: 0;
  left: 0;
  // display: none;
  height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 36px;
  background: black;
  color: #fff;
  border-radius: 10px;
}
</style>
